<template>
      <el-menu class="v-menu"  :collapse="collapse" background-color="#324157"
            text-color="#bfcbd9" active-text-color="#20a0ff" collapse-transition unique-opened router>
        <template v-for="item in items" >
            <template v-if="item.subs">
                <el-submenu :index="item.index" :key="item.index" >
                    <template slot="title">
                    <i :class="item.icon"></i>
                    <span slot="title">{{item.title}}</span>
                    </template>
                <el-menu-item  v-for="sub in item.subs" :index="sub.index" :key="sub.index">{{sub.title}}</el-menu-item>
                </el-submenu>
            </template>
            <template v-else>
                <el-menu-item :index="item.index" :key="item.index">
                    <i :class="item.icon"></i>
                    <span slot="title">{{item.title}}</span>
                </el-menu-item>
            </template>
        </template>

      </el-menu>
</template>
<script>
import bus from './bus';
export default {
    data(){
        return {
            collapse:true,
            items:[
                {
                    icon:'el-icon-setting',
                    index:'dashboard',
                    title:'系统首页',
                    subs:[
                        {
                            index:'/home/tab1',
                            title:'选项一',
                        },
                        {
                            index:'tt',
                            title:'选项二',
                        }
                    ]
                },
                {
                    icon:'el-icon-setting',
                    index:'user',
                    title:'用户设置'
                },
                {
                    icon:'el-icon-setting',
                    index:'count',
                    title:'最近账单'
                },

            ]
        }
    },
    computed:{
        onRoutes(){
            return this.$route.path.replace('/','');
        }
    },
    created(){
            // 通过 Event Bus 进行组件间通信，来折叠侧边栏
            bus.$on('collapse', msg => {
                this.collapse = msg;
                console.log("调用了created方法");

            });
    }


}
</script>
<style scoped>

    .v-menu:not(.el-menu--collapse){
        /*width: 210px;*/
    }
    .el-menu{
      border: none;
    }


    .sidebar-expend{
        /*width: 210px;*/
    }

    ul{
        /*min-height:calc(100vh - 70px);*/
    }


</style>
